<template>
  <div class="allrecommendusers_mainpanel">
    <PullRefresh @refresh="updateItems">
      <div slot="pullRefreshSlot">
        <h1 class="allrecommendusers_mainpanel_recommendheader">
          {{ $t("lang.为你推荐") }}
        </h1>
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('lang.已经到底了')"
          :error.sync="error"
          :error-text="this.$t('lang.请求失败，点击重新加载')"
          @load="onLoad"
          v-if="items.length > 0"
        >
          <ItemPanelHeader
            :item="item"
            v-for="(item, index) in items"
            :key="'recommendUser_' + index"
          >
            <FollowButton
              :item="item"
              slot="itemPanelHeaderMenu"
              slot-scope="{ item }"
            ></FollowButton>
          </ItemPanelHeader>
        </van-list>
        <div v-else class="nodata">
          <NoContent :type="noContentType"></NoContent>
        </div>
      </div>
    </PullRefresh>
    <!-- <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :pulling-text="this.$t('lang.下拉即可刷新')"
      :loosing-text="this.$t('lang.释放即可刷新')"
      :loading-text="this.$t('lang.加载中')"
    >
      <h1 class="allrecommendusers_mainpanel_recommendheader">
        {{ $t("lang.为你推荐") }}
      </h1>
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="$t('lang.已经到底了')"
        :error.sync="error"
        :error-text="this.$t('lang.请求失败，点击重新加载')"
        @load="onLoad"
        v-if="items.length > 0"
      >
        <ItemPanelHeader
          :item="item"
          v-for="(item, index) in items"
          :key="'recommendUser_' + index"
        >
          <FollowButton
            :item="item"
            slot="itemPanelHeaderMenu"
            slot-scope="{ item }"
          ></FollowButton>
        </ItemPanelHeader>
      </van-list>
      <div v-else class="nodata">
        <NoContent :type="noContentType"></NoContent>
      </div>
    </van-pull-refresh> -->
  </div>
</template>
<script>
export default {
  name: "AllRecommendUsersMain",
  data() {
    return {
      items: [],
      loading: false,
      finished: true,
      error: false,
      noContentType: 10,
      isLoading: false,
    };
  },
  components: {
    PullRefresh: () =>
      import(
        /* webpackChunkName:"pullRefresh" */ "../../components/common/pullRefresh.vue"
      ),
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName:"itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader.vue"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:"followButton" */ "../../components/common/followButton.vue"
      ),
    NoContent: () =>
      import(
        /* webpackChunkName:"noContent" */ "../../components/common/noContent.vue"
      ),
  },
  created() {
    this.updateItems(1).then(() => {});
  },
  methods: {
    onLoad() {},
    updateItems(pageNum, callback) {
      return new Promise((resolver, reject) => {
        this.items = [
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
          {
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "undefined",
            position: "中国",
            isNewContent: true,
          },
        ];
        callback && callback();
        resolver();
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.allrecommendusers_mainpanel {
  padding: 10 / @base;
  h1 {
    &.allrecommendusers_mainpanel_recommendheader {
      font-size: 14 / @base;
      text-align: left;
      padding: 10 / @base 0;
    }
  }
}
</style>
